import AnswerQuestion from '@/views/question/components/question-add/index.vue'
import RadioQuestion from '@/views/question/components/question-add/radio.vue'
import CheckboxQuestion from '@/views/question/components/question-add/checkbox.vue'
import $ from 'jquery'
import Vue from 'vue'
//引入 coment 组件
//! 把问卷渲染成单选题
export function drawRadio(num, vueObj, questionShowStyle) {
  let Profile = Vue.extend({
    components: { CheckboxQuestion, RadioQuestion, AnswerQuestion },
    template: `
            <RadioQuestion
                :count="count"
                @focus.native="focusQuestion"
                class="addQuestion"
                :class="computedNum"
                @delete-question="deleteQuestion"
                v-if="ismount === true"
                ref="reIndex"
                :isQuestionShowStyle="isQuestionShowStyle"
            />
          `,
    data: function () {
      return {
        //给组件传值
        count: 0,
        // questionStyle: {},
        ismount: true,
        needEditNumber: 1,
        isQuestionShowStyle: questionShowStyle,
      }
    },
    created() {
      this.count = num
    },
    mounted() {
      //在渲染之前被聚焦
      console.log($(`.addQuestion${num}`))
      $(`.addQuestion${num}`).focus()
    },
    computed: {
      //动态计算class
      computedNum() {
        console.log(num.toString(), 'computed')
        return 'addQuestion' + num.toString()
      },
    },
    methods: {
      //选中改变样式：
      focusQuestion() {
        let classStr = this.$refs.reIndex.$refs.questionDom.className
        console.log(classStr, 'Qaq')
        let classNum = parseInt(classStr.substr(classStr.length - 1, 1))

        //选中的时候让子组件知道自己被选中了
        // this.$refs.reIndex.isFocus = true

        //选中的时候判断 * 号的样式是什么
        let isReqAnswer = $(`.addQuestion${classNum} .isRequireAnswer`).css(
          'display'
        )
        if (isReqAnswer === 'inline') {
          vueObj.isRequire[0].isReq = 1
          this.$refs.reIndex.questionData.requiredQue = 1
          console.log(isReqAnswer, 'isRequireAnswer')
        } else {
          vueObj.isRequire[0].isReq = 0
          this.$refs.reIndex.questionData.requiredQue = 0
        }

        //选中的时候获取当前组件的类型,并且把数据发送出去
        vueObj.questionNumber = classNum
        let type = this.$refs.reIndex.questionData.queType
        console.log(type, 'focusQuestion')
        if (type === 1) {
          vueObj.type[0].topic = 1
          console.log(vueObj.type[0].topic, 'focusQuestion')
        } else if (type === 2) {
          vueObj.type[0].topic = 2
          console.log(vueObj.type[0].topic, 'focusQuestion')
        } else if (type === 3) {
          vueObj.type[0].topic = 3
          console.log(vueObj.type[0].topic, 'focusQuestion')
        }
        //先所有组件变灰，再单独组件变蓝
        $(`.addQuestion`).css('border', '2px solid lightgrey')
        $(`.addQuestion${classNum}`).css(
          'border',
          '3px solid rgb(59, 81, 185)'
        )
      },
      //子组件接收到的值
      deleteQuestion(obj) {
        this.ismount = obj.ismount
        this.needEditNumber = obj.needEditNumber
        // console.log(store.state.question.n, 'p')
      },
    },
    updated() {
      //循环的去修改组件的 class 属性序号：
      //删除再添加
      console.log(vueObj.questionNumber)
      console.log($('.addQuestion').length)
      console.log('**********************')
      //统计循环次数的变量
      // let cou = 0
      for (
        let i = vueObj.questionNumber;
        i <= $('.addQuestion').length;
        i++
      ) {
        // cou++
        console.log(i + 1)
        console.log(i + 1, 're')
        console.log(i, 'add')
        $(`.addQuestion${i + 1}`)
          .removeClass(`addQuestion${i + 1}`)
          .addClass(`addQuestion${i}`)
      }
      console.log('**********************')
      // 循环的去修改问题序号：
      for (
        let i = vueObj.questionNumber; //删除的那个问卷后面的一个问卷
        i <= $('.addQuestion').length;
        i++
      ) {
        //因为上面把组件的 class 改好了
        $(`.addQuestion${i} .questionNum`).text(i)
      }

      //删除问卷后后一个问卷被选中
      //因为上面把组件的 class 改好了
      $(`.addQuestion${vueObj.questionNumber} `).focus()

      //? 删除的同时把 profileArray 数组中对应的 vue 组件也删除
      vueObj.profileArray.splice(vueObj.questionNumber - 1, 1)
      console.log(vueObj.profileArray)
    },
  })
  // 创建 Profile 实例，并挂载到一个元素上。
  let newProfile = new Profile().$mount(
    `.addQuestion${vueObj.questionNumber}`
  )
  return newProfile

}
